<template>
  <div class="container">
    <el-button class="addBtn" type="primary" @click="addHandle"
      >新增短链</el-button
    >
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="name" label="链接名称" />
      <el-table-column prop="domain" label="短链网址" width="400">
        <template slot-scope="scope">
          <div class="linkContent">
            <div class="right">
              <div class="blue">{{ scope.row.url }}</div>
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content" class="tootipContent">
                  跳转连接：<br />
                  <span class="tootip">{{ scope.row.originUrl }}</span>
                </div>
                <div class="ellipsis">{{ scope.row.originUrl }}</div>
              </el-tooltip>
            </div>
            <div class="left">
              <i
                class="icon el-icon-copy-document"
                @click="copyHandle(scope.row.url)"
              ></i>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="编码" />
      <el-table-column prop="foreverStatus" label="是否永久">
        <template slot-scope="scope"
          ><span>{{ scope.row.foreverStatus ? "是" : "否" }}</span></template
        >
      </el-table-column>
      <el-table-column prop="expiredTime" label="过期时间" />
      <el-table-column prop="views" label="访问次数" />
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <div class="tableOperator">
            <span @click="openModal(scope.row, 'edit')">编辑</span>
            <span @click="openModal(scope.row, 'delete')">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagenation">
      <el-pagination
        :page-size="filterParams.pageSize"
        layout="sizes,prev, pager, next"
        :page-sizes="[10, 20, 50]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>

    <el-drawer :visible.sync="addLinkModal" :with-header="false">
      <div class="drawerTitleBox">
        {{ upDataID ? "修改分组" : "添加分组" }}
      </div>
      <el-form
        label-width="120px"
        labelPosition="right"
        class="formContainer"
        :model="formData"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="短链名称：" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="域名：" prop="domain">
          <el-input v-model="formData.domain"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接：" prop="originUrl">
          <el-input
            v-model="formData.originUrl"
            placeholder="请输入http://或https://开头的链接或应用跳转链接"
          ></el-input>
        </el-form-item>
        <el-form-item label="短链分组：" prop="groupId">
          <el-select v-model="formData.groupId">
            <el-option
              v-for="item in groupOptions"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否永久：">
          <el-radio-group v-model="formData.foreverStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.foreverStatus == 0" prop="expiredTime">
          <el-date-picker
            v-model="formData.expiredTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <div class="modalBtnBox">
          <el-button @click="addGroupModal = false">取消</el-button>
          <el-button type="primary" @click="finish">确认</el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  getShortLinkPage,
  addShortLink,
  updateShortLink,
  delteShortLink,
  getShortGroupList,
} from "@/api/article";
export default {
  props: {
    groupID: {
      type: Number | String,
      default: null,
    },
  },
  data() {
    return {
      tableData: [],
      filterParams: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      upDataID: null,
      addLinkModal: false,
      formData: {
        name: "",
        originUrl: "",
        groupId: "",
        domain: "3szr.com",
        expiredTime: "",
      },
      rules: {
        name: [{ required: true, message: "必填" }],
        originUrl: [{ required: true, message: "必填" }],
        domain: [{ required: true, message: "必填" }],
      },
      groupOptions: [],
    };
  },
  mounted() {
    this.getShortGroupList();
  },
  watch: {
    groupID(val) {
      if (val) {
        this.getShortLinkPage();
      }
    },
  },
  methods: {
    // 短链分组
    async getShortGroupList() {
      let res = await getShortGroupList();
      this.groupOptions = res.data.map((item) => {
        if (item.defaultStatus) {
          this.formData.groupId = item.id;
        }
        item.label = item.groupName;
        item.value = item.id;
        return item;
      });
    },
    async getShortLinkPage() {
      let params = {
        groupId: this.groupID,
        ...this.filterParams,
      };
      let res = await getShortLinkPage(params);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },

    // 复制
    async copyHandle(textToCopy) {
      await navigator.clipboard.writeText(textToCopy);
      this.$message({
        type: "success",
        message: "复制成功!",
      });
    },

    // 添加编辑短链
    addHandle() {
      this.upDataID = null;
      this.addLinkModal = true;
      let groupId = "";
      this.groupOptions.map((item) => {
        if (item.defaultStatus) {
          groupId = item.id;
        }
      });
      this.formData = {
        domain: "3szr.com",
        groupId: groupId,
      };
    },
    openModal(data, type) {
      this.upDataID = data.id;
      if (type == "delete") {
        this.deleteShortLink();
      } else {
        this.formData = {
          ...data,
          foreverStatus: data.foreverStatus ? 1 : 0,
        };
        this.addLinkModal = true;
      }
    },
    finish() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.addEditShortLink();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async addEditShortLink() {
      if (this.upDataID) {
        await updateShortLink({
          // ...this.formData,
          groupId: this.formData.groupId,
          name: this.formData.name,
          domain: this.formData.domain,
          originUrl: this.formData.originUrl,
          foreverStatus: this.formData.foreverStatus,
          expiredTime: this.formData.expiredTime,
          id: this.upDataID,
        });
      } else {
        await addShortLink(this.formData);
      }
      this.$message({
        message: this.upDataID ? "修改成功" : "添加成功",
        type: "success",
      });
      this.addLinkModal = false;
      this.getShortLinkPage();
    },

    // 删除
    deleteShortLink() {
      this.$alert("确认删除短链?", "删除短链", {
        confirmButtonText: "确定",
        type: "warning",
        callback: async () => {
          if (action == "confirm") {
            this.filterParams.pageNum = 1;
            await delteShortLink(this.upDataID);
            this.$message({
              type: "success",
              message: `删除成功`,
            });
            this.getShortLinkPage();
          }
        },
      });
    },

    // 分页修改
    handleCurrentChange(val) {
      this.filterParams.pageNum = val;
      this.getShortLinkPage();
    },
    handleSizeChange(val) {
      this.filterParams.pageSize = val;
      this.getShortLinkPage();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .pagenation {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px; 
  }
  .addBtn {
    margin-bottom: 10px;
  }

  .blue {
    color: #2d5fec;
  }
  .ellipsis {
    white-space: nowrap; //不换行
    overflow: hidden; //超出部分隐藏
    text-overflow: ellipsis; //文本溢出显示省略号
  }

  .modalBtnBox {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    height: 80px;
    border-top: 1px solid #ddd;
  }
  .tableOperator {
    color: #2d5fec;
    span {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

.linkContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    width: 5%;
    i:hover {
      color: #2d5fec;
    }
  }
  .right {
    width: 90%;
  }
}

.drawerTitleBox {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  font-size: 18px;
}
.tootip {
  max-width: 400px;
  display: inline-block;
}

.formContainer {
  padding-right: 20px;
}
.tootipContent {
  font-size: 16px;
  line-height: 1.6;
}
</style>
